<template>
  <div>
    <!-- 数据记录 -->
    <el-alert type="info" class="alert" :closable="false" show-icon>
      <template>
        <span>数据一共{{ total }}条</span>
      </template>
    </el-alert>
    <!-- 表格 -->
    <el-table :data="lists" style="width: 100%">
      <el-table-column prop="number" label="试题编号" width="120">
      </el-table-column>
      <el-table-column prop="subject" label="学科" width="120">
      </el-table-column>
      <el-table-column prop="catalog" label="目录" width="120">
      </el-table-column>
      <el-table-column label="题型" width="120">
        <template slot-scope="scope">
          {{ formatQuestionsType(scope.row.questionType) }}
        </template>
      </el-table-column>
      <el-table-column label="题干">
        <template slot-scope="scope">
          <div class="img-container">
            <!-- <img src="https://img2.baidu.com/it/u=3681880960,455182084&fm=26&fmt=auto&gp=0.jpg" alt="" /> -->
            <span v-html="scope.row.question"></span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="录入时间" width="180">
        <template slot-scope="scope">
          {{ formatDate(scope.row.addDate) }}
        </template>
      </el-table-column>
      <el-table-column label="难度" width="120">
        <template slot-scope="scope">
          {{ FormatDifficulty(scope.row.difficulty) }}
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="120">
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            title="预览"
            type="primary"
            plain
            icon="el-icon-view"
            circle
            @click="preview(scope.row.id)"
          ></el-button>
          <el-button
            title="修改"
            type="success"
            plain
            icon="el-icon-edit"
            circle
            @click="editFn(scope.row.id)"
          ></el-button>
          <el-button
            title="删除"
            type="danger"
            plain
            icon="el-icon-delete"
            circle
            @click="removeFn(scope.row.id)"
          ></el-button>
          <el-button
            title="加入精选"
            type="warning"
            plain
            icon="el-icon-check"
            circle
            @click="choiceFn(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagenation block">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentPage"
        :page-sizes="[5, 8, 10, 20]"
        :page-size="params.pagesize"
        background
        layout="prev, pager, next,sizes, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 预览的弹框 -->
    <DialogPreview
      :ProviewdialogVisible="ProviewdialogVisible"
      :proview-data="ProviewData"
      @proview-close="proviewClose"
    />
  </div>
</template>

<script>
import DialogPreview from './DialogPreview'
import { list, remove, choiceAdd, detail } from '@/api/hmmm/questions'
import { difficulty, questionType } from '@/api/hmmm/constants'
import dayjs from 'dayjs'
export default {
  components: {
    DialogPreview
  },
  props: {
    subject: {
      type: Number
    },
    keyword: {
      type: String
    }
  },
  data () {
    return {
      lists: [], // 存储题库列表
      total: 0, // 总条数
      params: {
        page: 1, // 当前页数
        pagesize: 5 // 页大小
      },
      ProviewdialogVisible: false,
      curId: null,
      ProviewData: {}
    }
  },
  created () {
    this.questionList()
  },
  methods: {
    // 存储题库列表数据
    async questionList () {
      const res = await list({
        ...this.params,
        subjectID: this.subject,
        keyword: this.keyword
      })
      this.lists = res.data.items
      this.total = res.data.counts
    },
    // 点击当前页
    currentPage (page) {
      // 把最新的页码赋值
      this.params.page = page
      // 调用接口的方法 重新渲染最新的页面
      this.questionList()
    },
    sizeChange (val) {
      console.log(val)
      this.params.pagesize = val
      this.questionList()
    },
    // 题型格式化
    formatQuestionsType (val) {
      const questionsType = questionType
      const map = {}
      questionsType.forEach((item) => {
        map[item.value] = item.label
      })
      return map[val]
    },
    // 难度格式化
    FormatDifficulty (val) {
      const FormatDifficulty = difficulty
      const map = {}
      FormatDifficulty.forEach((item) => {
        map[item.value] = item.label
      })
      return map[val]
    },
    // 时间格式化
    formatDate (val) {
      return dayjs(val).format('YYYY-MM-DD HH:MM:ss')
    },
    // 删除
    removeFn (id) {
      console.log(id)
      this.$confirm('你确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          console.log('shanchu', id)
          await remove({ id })
          // 加载完重新加载页面
          this.questionList()
          // 提示用户
          this.$message.success('删除成功')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 加入精选
    choiceFn (id) {
      this.$confirm('你确定要加入精选题库吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(async () => {
          await choiceAdd({ id, choiceState: 1 })
          // 提示用户
          this.$message.success('加入精选题库成功')
          // 跳转到精选题库
          // this.$router.push('/questions/choice')
          // 加载页面
          this.questionList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 修改
    editFn (id) {
      console.log('修改', id)
      this.$router.push({
        path: '/questions/new',
        query: {
          id: id
        }
      })
    },
    // 预览
    preview (id) {
      console.log('预览', id)
      this.ProviewdialogVisible = true
      this.curId = id
      this.hDetail()
    },
    proviewClose () {
      this.ProviewdialogVisible = false
    },
    async hDetail () {
      console.log(this.curId)
      const res = await detail({ id: this.curId })
      this.ProviewData = res.data
      console.log('详情', res)
    }
  }
}
</script>

<style scoped lang='scss'>
.pagenation {
  text-align: right;
}
.alert {
  margin-bottom: 10px;
}
.img-container {
  ::v-deep img {
    display: inline-block !important;
    width: 250px !important;
    height: 200px !important;
  }
}
</style>
